<template>
	<view class="bg">
		<!-- 资质情况 -->

		<view class="QualificationSituation">
			<view class="QualificationSituation_title">
				<!-- <img src='../../../static/home.png' /> -->
				<view class="QualificationSituation_title1">请完善一下资料</view>
				<text class="QualificationSituation_title2">补充一下资料，有助于您获得更高的额度</text>
			</view>
			<view>
				<view v-for="item in QualificationSituationList" class="QualificationSituation_item">
					<view class="QualificationSituation_item_title">
						<view class="QualificationSituation_item_title1">{{item.name}}</view>
						<view class="QualificationSituation_item_title2" v-if="item.name2">{{item.name2}}</view>
					</view>
					<view class="QualificationSituation_item_ele" v-if="item.value == []">
						<!-- item.value = ele.value -->
						<view v-for="ele in item.list" :class="item.value == ele.value?'pitchOn':''"
							@click="listclick(item,ele)">{{ele.name}}</view>
					</view>
					<view class="QualificationSituation_item_ele" v-else>
						<view v-for="ele in item.list" :class="{ 'pitchOn': item.value.includes(ele.value) }"
							@click="listclicks(item,ele)">{{ele.name}}</view>
					</view>
				</view>
			</view>
		</view>
	
	
		<!-- <view class="Submitclabg"> -->
			<view class="Submitcla" @click="SubmitBtn()">提交申请</view>
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					edu: '',
					zhiy: '',
					zhimafen: '',
					gerenzichan: '',

				},
				QualificationSituationList: [{
						name: '借款额度（元）',
						value: '',
						list: [{
								value: '1',
								name: '5万以下'
							},
							{
								value: '2',
								name: '5万到10万'
							},
							{
								value: '3',
								name: '10到20万'
							},
						]
					},
					{
						name: '职业',
						value: '',
						list: [{
								value: '1',
								name: '上班族'
							},
							{
								value: '2',
								name: '自由职业'
							},
							{
								value: '3',
								name: '企业主'
							},
							{
								value: '4',
								name: '公务员/国企'
							},
						]
					},
					{
						name: '芝麻分',
						value: '',
						list: [{
								value: '1',
								name: '700以上'
							},
							{
								value: '2',
								name: '650-700分'
							},
							{
								value: '3',
								name: '600-650分'
							},
							{
								value: '4',
								name: '无'
							},
						]
					}, {
						name: '个人资质（多选）',
						name2: '资产越多，匹配通过率越高',
						value: [],
						list: [{
								value: '1',
								name: '有房'
							},
							{
								value: '2',
								name: '有车'
							},
							{
								value: '3',
								name: '有公积金'
							},
							{
								value: '4',
								name: '有社保'
							},
							{
								value: '5',
								name: '全部无'
							},
						]
					},
				]
			}
		},
		methods: {
			listclick(item, ele) {
				console.log(item)
				// if (item.name2) {
				// 	item.value = []

				// } else {
					item.value = ele.value

				// }
			},
			listclicks(item,ele){
				const index = item.value.indexOf(ele.value)
				  if (index !== -1) {  
				      // 如果值存在，则删除它  
				      item.value.splice(index, 1);  
				    } else {  
				      // 如果值不存在，则添加到数组中  
				      item.value.push(ele.value);  
				    }  
				
				console.log(item.value)
			},
			SubmitBtn(){
				// LimitDetection
				uni.navigateTo({
					url: '/pages/message/Retention/LimitDetection'
				});
			}
		
		
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F1F4F9;
		// padding: 32rpx 40rpx 25rpx 40rpx;
		// padding-bottom: 500rpx;
		// padding-top: 32rpx;
		
		background: #FFFFFF;
	}

	.QualificationSituation {
		// width: 606rpx;
		// height: 976rpx;
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		// margin-top: 32rpx;
		padding: 0rpx 40rpx 40rpx 40rpx;

		.QualificationSituation_title {
			line-height: 76rpx;
			margin-bottom: 18rpx;

			img {
				height: 40rpx;
				width: 40rpx;
				vertical-align: middle;
			}

			.QualificationSituation_title1 {
				// width: 128rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				line-height: 38rpx;
				margin-left: 5rpx;
				margin-right: 16rpx;
			}

			.QualificationSituation_title2 {
				width: 360rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}


		.QualificationSituation_item {
			.QualificationSituation_item_title {
				display: flex;
				justify-content: space-between;
			}

			.QualificationSituation_item_title2 {
				width: 288rpx;
				height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #808080;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.QualificationSituation_item_title1 {
				height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 32rpx;
			}

			.QualificationSituation_item_ele {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 28rpx;
				margin-bottom: 40rpx;

				view {
					width: 183rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 2rpx solid #E0E0E0;
					line-height: 60rpx;
					text-align: center;
					margin: 8rpx;
					color: #808080;
				}

				.pitchOn {
					background-color: blue;
					color: #fff;
				}
			}
		}
	}

// .Submitclabg{
// 	background-color: #fff;
// 	// width: 750rpx;
// 	// height: 100rpx;
// 	// padding-top: 10rpx;
// }
.Submitcla{
	width: 686rpx;
	height: 108rpx;
	background: #2567FF;
	border-radius: 54rpx 54rpx 54rpx 54rpx;
	margin: 0 auto;
	line-height: 108rpx;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	margin-top: 130rpx;
	// margin-bottom: 12rpx;
	// position: relative;
	// top: 35rpx;
}

</style>
<style>
</style>